<template>
	<div class="AreaGame">
		<AreaGame-header></AreaGame-header>
		<div class="main">
			<template v-for='(value,key) in list'>
				<p class="AreaGame-title">{{ swicth(key) }}</p>
				<div class="AreaGame-com">
					<ul>
						<li 
							v-for='(item,index) in value'  :key="index"
							v-show='showFun(key,index)'
							@click='goStateDetails(item.countryId,item.name_zh)'
						>{{ item.name_zh }}</li>
					</ul>
					<p 
						class="more"
						@click='listShow[key] = !listShow[key]'
					>
						<span class="iconfont">{{ listShow[key]?'&#xe600;':'&#xe602;' }}</span> 
						{{ listShow[key]?'收起':'点击加载更多' }}
						
					</p>
				</div>
			</template>
		</div>
		
	</div>	
</template>
<script>
import AreaGameHeader from './components/Header'
import axios from 'axios'
import { Toast,Indicator  } from 'mint-ui'
export default {
	name: 'AreaGame',
	components:{
		AreaGameHeader,
	},
	data:function(){
		return {
			list:{},
			listShow:{
				'asoc':false,
				'europe':false,
				'america':false,
				'africa':false,
			},
		}
	},
	methods:{
		getList(){
			Indicator.open({
			  text: '加载中···',
			  spinnerType: 'fading-circle'
			});
        	var t = this,listShowState = new Object();
          	axios.get('/static/country.json')
	            .then(function(res) {
	            	res = res.data
			        if (res.status == 0 && res.data) {
			            const data =  res.data
			            t.list = {
			            	"asoc":data.asoc,
			            	"europe":data.europe,
			            	"america":data.america,
			            	"africa":data.africa
			            };
			            Indicator.close();
			            if (!data) {
			            	Toast('没有数据');
			            }
			       }
	            })
            	.catch(function (error) {
	                Toast(error);
	            });
		},
		swicth(key){
			var title = ''
			switch(key)
			{
			case "asoc":
			  title = '亚洲/大洋洲'
			  break;
			case "europe":
			   title = '欧洲'
			  break;
			case "america":
			   title = '美洲'
			  break;
			case "africa":
			   title = '非洲'
			  break;
			}
			return title
		},
		showFun(key,index){
			var t = this
			if (index < 9) {
				return true
			}else if(t.listShow[key]){
				return true
			}else{
				return false;
			}
		},
		goStateDetails(id,name){
			this.$router.push({
	          path: '/AreaGame/List',
	          query: {
	            name: name,
	            countryId:id
	       	 	}
	        })
	    }

	},
	mounted () {
		this.getList();
	},
	activated () {
	}
};
</script>
<style lang="less" scoped>
	@import '~styles/varibles.less';
	.main{
		padding-top: 1rem;
	}
	.AreaGame-title{
		height: .64rem;
		line-height: .64rem;
		font-size: .3rem;
		color: #4F4F4F;
		padding:0 .2rem;
		background-color: #F5F8FB;
		font-weight: bold;
		border-bottom: 1px #E0E0E0 solid
	}
	.AreaGame-com{
		background-color: #fff;
		padding:.2rem .1rem;
		text-align: center;
		li{
			display: inline-block;
			width: 30%;
			margin:0 1% .2rem;
			padding:.12rem 0;
			color: @grayColor;
			background:#F5F8FB;
		}
	}
	.more{
		color: @grayColor;
		.iconfont{
			font-size: .24rem;
		}
	}
</style>
